<template>
  <div class="pdf-page-2">
    <div class="part-title divider-inside">Part I Personal Information</div>
    <div class="table">
      <div class="table-grid">
        <div class="table-row divider-inside">
          <div class="table-label">Booklet Opening Date</div>
          <div class="table-value">{{ data?.book_open_date }}</div>
        </div>
        <div class="table-row divider-inside">
          <div class="table-label">Last Name/First Name</div>
          <div class="table-value">{{ data?.name }}</div>
        </div>
        <div class="table-row divider-inside">
          <div class="table-label">Date of birth</div>
          <div class="table-value">{{ data?.date_of_birth }}</div>
        </div>
        <div class="table-row divider-inside">
          <div class="table-label">Birth Place</div>
          <div class="table-value">{{ data?.place_of_birth }}</div>
        </div>
        <div class="table-row divider-inside">
          <div class="table-label">Nationality</div>
          <div class="table-value">{{ data?.country }}</div>
        </div>
        <div class="table-row divider-inside">
          <div class="table-label">Passport #</div>
          <div class="table-value">{{ data?.passport }}</div>
        </div>
        <div class="table-row divider-inside">
          <div class="table-label">Email</div>
          <div class="table-value">{{ data?.email }}</div>
        </div>
        <div class="table-row divider-inside">
          <div class="table-label">Years Of Experience</div>
          <div class="table-value">{{ data?.years_of_experience }}</div>
        </div>
      </div>
      <div class="row-large">
        <div class="table-row divider-inside">
          <div class="table-label">Education Level</div>
          <div class="table-value">{{ data?.eduction_level }}</div>
        </div>
        <div class="table-row divider-inside">
          <div class="table-label">Qualifications</div>
          <div class="table-value">{{ data?.qualifications }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, onUpdated, ref, watch } from "vue";

const journalData: any = inject("journalData")!;
const data = journalData.value[0].data;
</script>
<style scoped lang="less">
@import url("../less/index.less");
</style>
